<template>
	<mu-container>
		<mu-form :model="form" class="mu-search-form" :label-position="labelPosition" label-width="100">
			<mu-form-item label="开始时间">
				<mu-date-input v-model="form.date1" type="date" actions></mu-date-input>
			</mu-form-item>
			<mu-form-item label="结束时间">
				<mu-date-input v-model="form.date2" type="date" actions></mu-date-input>
			</mu-form-item>
			<mu-form-item label="案件号">
				<mu-text-field v-model="form.input1"></mu-text-field>
			</mu-form-item>
			<mu-form-item label="车牌号">
				<mu-text-field v-model="form.input2"></mu-text-field>
			</mu-form-item>
			<mu-flex justify-content="center" align-items="center">
				<mu-button color="primary">开始查找</mu-button>
				<mu-button @click="clear" style="margin-left: 5px;">重置</mu-button>
			</mu-flex>
		</mu-form>
	</mu-container>

</template>

<script> 
	import Vue from "vue";
	import '../../utils/common';
	import { openWebview } from "@/utils/webview";
	import { request } from "@/utils/request";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import '@/assets/muse/MaterialIcons-Regular.css';

	Vue.use(MuseUI);
	export default {
		data() {
			return {
				labelPosition: 'top',
				form: {
					input1: '',
					input2: '',
					date1: '2018-07-20',
					date2: '2018-07-20'
				}
			}
		},
		methods: {
			clear() {
				this.form = {
					input1: '',
					input2: '',
					date1: '',
					date2: ''
				}
			}
		}
	};
</script>

<style lang="less">
	.mu-popover {
		max-width: 100%;
	}
	
	.mu-container {
		background-color: #F1F1F1;
	}
</style>